<!DOCTYPE html>
<html lang="en">
#parse('base/head.html')
	<link rel="stylesheet" href="$!webPath/index/css/reset.css" type="text/css">
	<link rel="stylesheet" href="$!webPath/index/css/index.css" type="text/css">
<body class="mW-1108">
	<div class="PovertyAlleviationWrap">
		<div class="PAP_header">
			<form method="POST"   id="qryForm">
				<div class="hidden" >
					<input class="col-xs-12 col-sm-10" type="text"  id="form-field-currentYear" placeholder="currentYear" value="$!{currentYear}" />
				</div>
				<select class=" PAP_choice" name="vtime" id="form-select-vtime" data-placeholder="年份">
					<option value="2017">2017</option>
					<option value="2018">2018</option>
					<option value="2019">2019</option>
					<option value="2020">2020</option>
					<option value="2021">2021</option>
					<option value="2022">2022</option>
					<option value="2023">2023</option>
					<option value="2024">2024</option>
					<option value="2025">2025</option>
					<option value="2026">2026</option>
					<option value="2027">2027</option>
					<option value="2028">2028</option>
					<option value="2029">2029</option>
					<option value="2030">2030</option>
				</select>
				
				<select class=" PAP_choice" name="townId" id="form-select-townId" data-placeholder="镇(乡)">
					<option value="-1">全部</option>
					#foreach($townInfoPO in $townInfoPOList)
					<option value="$!{townInfoPO.townId}">$!{townInfoPO.townName}</option>
					#end
				</select>

				<button type="button" id="qryBtn"  class="btn btn-sm btn-primary pull-left " ><span class="ace-icon fa fa-plus icon-on-right"></span>开始统计</button>
				
				<button type="button" id="excelBtn"  class=" hidden btn btn-sm btn-primary pull-left " ><span class="ace-icon fa fa-download icon-on-right"></span>导出数据</button>
			</form>
			
		</div>
		<div class="SCCon">
			<div class="leftEcharts">
				<div class="Details-Box">
					<div class="Details-2-1">
						<em>预计投入</em>
						<strong><span id="total_invest_id"></span></strong>
					</div>
					<div class="Details-2-1">
						<em>累计投入</em>
						<strong><span id="aid_amount_id"></span></strong>
					</div>
				</div>
				<div id="implement"></div>
				<div class="Details-Box">
					<div class="Details-2-1">
						<em>惠及农民</em>
						<strong><span id="project_family_cnt_id"></span></strong>
					</div>
					<div class="Details-2-1">
						<em>预计收益</em>
						<strong><span id="estimated_income_id"></span></strong>
					</div>
				</div>
				<h3 class="ech_title">资金走势</h3>
				<div id="FundTrend"></div>
			</div>
			<div class="rightTable">
				<div class="row">
					<div class="col-sm-12" style="overflow-x:auto">
						<table id="grid-list"></table>
						<div id="grid-list-pager"></div>
					</div>
				</div>
				<h3 class="poorTJ-btn hidden">合计<strong><span id="project_cnt_id"></span>个</strong></h3>
			</div>
		</div>
		
					<div class="col-sm-12">
						<!-- 模态框（Modal） -->
						<div class="modal fade bs-example-modal-lg" id="projectFamilyModal" tabindex="-1" role="dialog" data-backdrop="true" data-keyboard="false" aria-labelledby="pro_detail_title_id1" aria-hidden="true">
							<div class="modal-dialog modal-lg" >
								
								<div class="modal-content" style="height: 600px;overflow: auto;">
									<div class="modal-header hide">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
										</button>
									</div>
									<div class="modal-body center " style="overflow: auto;">
										<div style="clear:both"></div>
										<div style="height:400px;">
											<div class="fp-loading">
											 <i class="fa fa-spinner fa-pulse fa-3x"></i>
											 <p>数据加载中，请耐心等待</p>
											</div>
										</div>
									</div>
									<div class="modal-footer hide">
										
									</div>
								</div><!-- /.modal-content -->
							</div><!-- /.modal -->
						</div>
					</div>	
		
	</div>

#parse('base/footer.html')
<script src="$!webPath/assets/js/bootbox.js"></script>

<script type="text/javascript" src="$!webPath/index/js/echarts.min.js"></script>

<script type="text/javascript">
	// 落实占比
	var percentage = "0";
    var implement = echarts.init(document.getElementById('implement'));
    var implementoption = {
            color: ['#f4c51f','#f8e7a2'],
            yAxis: [
                {
                    show: false
                }
            ],
            series: [
                {
                    center: [
                        '50%',
                        '50%'
                    ],
                    radius: [
                        '95%',
                        '70%'
                    ],
                    hoverAnimation: false,
                    type: 'pie',
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [{
                        value: percentage,   //占比值
                        name: "落实占比\n" + percentage + '%', //显示百分比
                        label: {
                            normal: {
                                position: 'center',
                                show: true,
                                textStyle: {
                                    fontSize: '18',
                                    fontWeight: 'bold',
                                    color: '#666'
                                }
                            }
                        }
                    }, {
                        value: 100 - percentage,
                        name: ''
                    }
                    ]
                }
            ]
        };
    implement.setOption(implementoption);
    
    
	// 资金走势图
	var FundTrend = echarts.init(document.getElementById('FundTrend'));
    var FundTrendoption = {
    	tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '1%',
            right: '3%',
            top:'3%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            axisLine:{ 
                lineStyle:{ 
                    color:'#999', 
                    width:2 
                } 
            }, 
            data: ['01','02','03','04','05','06','07','08','09','10','11','12']
        },
        yAxis: {
            show:'true',
            type: 'value',
            axisLine:{ 
                lineStyle:{ 
                    color:'#999', 
                    width:2 
                } 
            },
        },
        series: [
            {
                name:'资金走势',
                type:'line',
                stack: '累计投入',
                symbol:'solid',
                data:[],
                itemStyle : { 
                    normal : { 
                        color:'#2d7ff9', 
                        lineStyle:{ 
                            color:'#2d7ff9' 
                        } 
                    } 
                }, 
            }           
        ]
    };
    FundTrend.setOption(FundTrendoption);
    
    
    //加载pie数据
   function reloadPieData(){
    	$.ajax({
			type: "POST",
			datatype:'json', 
			url: "$!webPath/jzsc/qryPieData",
			data: {
				'vtime':$("#form-select-vtime option:selected").val(),
                'townId':$("#form-select-townId option:selected").val()
			},
			success: function (result) {
				console.log(result);
				$("#total_invest_id").html(result.total_invest||0);
				$("#aid_amount_id").html(result.aid_amount||0);
				$("#project_family_cnt_id").html(result.project_family_cnt||0);
				$("#estimated_income_id").html(result.estimated_income||0);
				percentage = result.aid_rate||0;
				implement.setOption({
		            series: [
		                {
		                    data: [{
		                        value: percentage,   //占比值
		                        name: "落实占比\n" + percentage + '%', //显示百分比
		                    }, {
		                        value: 100 - percentage,
		                        name: ''
		                    }
		                    ]
		                }
		            ]
		        });
			},
			error: function (data) {
				$.msgErrorAlert("发生异常,"+data.msg);
				//alert("发生异常,"+data.msg);
			}
		}); 
    };
    
    //加载line数据
    function reloadLineData(){
    	$.ajax({
			type: "POST",
			datatype:'json', 
			url: "$!webPath/jzsc/qryLineData",
			data: {
				'vtime':$("#form-select-vtime option:selected").val(),
                'townId':$("#form-select-townId option:selected").val()
			},
			success: function (result) {
				var data = [0,0,0,0,0,0,0,0,0,0,0,0];
				$(result).each(function(){
				    data[parseInt($(this)[0].aid_month)-1]=$(this)[0].aid_amount;
				    
				});
				
				FundTrend.setOption({
			        series: [
			            {
			                data:data
			            }           
			        ]
			    });
			},
			error: function (data) {
				$.msgErrorAlert("发生异常,"+data.msg);
				//alert("发生异常,"+data.msg);
			}
		}); 
    	
    }
    
</script>

<script>
    var projectType = '';
    jQuery(function ($) {
        menuActive(2);
        
        $("#qryBtn").on('click',function () {
        	reloadPieData();
    		reloadGridData();
    		reloadLineData();
        });
    	
    	$("#excelBtn").on('click',function () {
    		console.log("excelBtn click");
        	var url = '$!webPath/jzsc/exportData?';
	  		var params = $('#qryForm').serialize();
	  		params = decodeURIComponent(params,true);
	  	    params = encodeURI(encodeURI(params));
	  		url += params;
	  		console.log(params);
	  		console.log(url);
	  		var w  = window.open(url,'_blank');   
        });
    	
    	
    	reloadPieData();
		reloadGridData();
		reloadLineData();
        
        
    });
</script>
<!-- 项目列表 -->
<script type="text/javascript">
    function reloadGridData() {
		console.log("reloadGridData...");
        jQuery("#grid-list").jqGrid('setGridParam',{
            datatype:'json',
			mtype : "POST",
            postData:{'vtime':$("#form-select-vtime option:selected").val(),
                'townId':$("#form-select-townId option:selected").val()
			}, //发送数据
            page:1
        }).trigger("reloadGrid");
    }
	
	var parentBodyHeight = $('#left-gov-tree', window.parent.document).height()||800;
    //var pkh_parent_column = $("#grid-list").closest('[class*="col-"]').closest('h4');
    var widget_header = $(".fpxmList");
	    //resize to fit page size


	
    
    
	
    //初始化模态窗口
    jQuery(function($) {
		//v2
		$("#operateDetailModal").on("hidden", function() {  
			$(this).removeData("modal");  
			console.log("operateDetailModal hidden ");
			
		});  
		//v3
		$("#operateDetailModal").on("hidden.bs.modal", function() {  
			$(this).removeData("bs.modal");
			/*modal页面加载$()错误,由于移除缓存时加载到<span style="color: rgb(51, 51, 255);"><div class="modal-content"></div></span>未移除的数据，手动移除加载的内容*/
			$(this).find(".modal-content").children().remove(); 
			console.log("operateDetailModal hidden.bs.moda ");
		}); 
	});
	    
    function detailClick_profamily(projectId){
        //window.location.href = ("$!webPath/fpxm/detail?projectId="+projectId);
		//打开模态窗口
		//console.log("清空模态详情");
		$('#projectFamilyModal').children().remove(); 
		//console.log("显示加载信息...");
		$('#projectFamilyModal').append('<div class="modal-dialog modal-lg " ><div class="modal-content" style="height: 600px;overflow: auto;"><div class="modal-header hide"></div><div class="modal-body center " ><div style="clear:both"></div><div style="height:400px;"><div class="fp-loading"><i class="fa fa-spinner fa-pulse fa-3x"></i><p>数据加载中，请耐心等待</p></div></div></div><div class="modal-footer hide"></div></div></div>'); 
		//console.log("加载模态详情");
		$('#projectFamilyModal').modal({keyboard:false,backdrop:true,remote:"$!webPath/fpxm/familyRelated?projectId="+projectId});
    };
	
    $("#grid-list").jqGrid({
        url : '$!webPath/jzsc/qryGridData',
        datatype : "json",
		mtype : "POST",
        height : parentBodyHeight-300,
        //autoHeight : true,
        autowidth: true,
        colNames : [ '项目编号','项目分类','项目名称','预计投入','累计投入','开始时间','结束时间','责任部门','惠及贫困户'],
        colModel : [

            {name : 'project_code',width:'100px',index : 'project_code' },
            {name : 'project_type_name',width:'85px',index : 'project_type_name' },
			{name : 'project_name',index : 'project_name' },
			{name : 'plan_invest',width:'85px',index : 'plan_invest' },
			{name : 'aid_amount',width:'85px',index : 'aid_amount' },
			{name : 'begin_date',width:'85px',index : 'oneVisitNum',formatter: function (cellvalue, options, rowObject) {
				return cellvalue.slice(0,10);
			} },
			{name : 'end_date',width:'85px',index : 'twoVisitNum',formatter: function (cellvalue, options, rowObject) {
				return cellvalue.slice(0,10);
			} },
			{name : 'resp_department',width:'50px',index : 'threeVisitNum' },
			{name : 'myac',index : '', fixed:true,width: '80px', sortable:false, resize:false,
				//				formatter:'actions',
				formatter: function (cellvalue, options, rowObject) {
				    var detail='<div style="cursor: pointer;">';
				    detail += '<i class="normal-icon ace-icon block-inherit blue " onclick="detailClick_profamily(' + rowObject.project_id +')">受惠贫困户</i>';
				    detail += '</div>';
				    return detail;
				}
			}            
        ],
        postData: {    
        	'vtime':$("#form-select-vtime option:selected").val(),
            'townId':$("#form-select-townId option:selected").val()
	    },
        jsonReader : {
            root : "resultList",
            page : "page",
            total : "totalPages",
            records : "totalRecords",
            rows : "resultList"
        },
        rowNum:20,
        rowList:[10,20,50,100],
        pager: '#grid-list-pager',
        viewrecords : true,
        loadComplete : function() {
			var table = this;
			setTimeout(function(){
				styleCheckbox(table);
				
				updateActionIcons(table);
				updatePagerIcons(table);
				enableTooltips(table);
			}, 0); 

			$(table).siblings(".norecords").remove(); 
			var rowNum = parseInt($(table).getGridParam("records"), 10);   
			if (rowNum <= 0) {   
				$(table).parent().append("<div  class=\"norecords\">没有数据...</div>");
				$(table).siblings(".norecords").show(); 								
			} 
        },

        multiselect : false
    });
    
    $("#grid-list").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "scroll" });

  	//v2
	$("#projectFamilyModal").on("hidden", function() {  
		$(this).removeData("modal");  
		console.log("projectFamilyModal hidden ");
		
	});  
	//v3
	$("#projectFamilyModal").on("hidden.bs.modal", function() {  
		$(this).removeData("bs.modal");
		/*modal页面加载$()错误,由于移除缓存时加载到<span style="color: rgb(51, 51, 255);"><div class="modal-content"></div></span>未移除的数据，手动移除加载的内容*/
		$(this).find(".modal-content").children().remove(); 
		console.log("projectFamilyModal hidden.bs.moda ");
		//$("#fpxm-project-list").jqGrid( 'setGridWidth', widget_header.width());
	}); 
    
</script>
<script>
    jQuery(function ($) {
    	//设置下拉框
    	var currentYear = $("#form-field-currentYear").val();
    	$("#form-select-vtime").find("option[value='"+currentYear+"']").attr("selected",true);
    	
    });

    
    
    </script>

</body>
</html>
